<template>
  <div class="app-container log-interface-config">
    <!-- 条件栏 -->
    <PageFilter
      v-model:query="filterInfo.query"
      :filter-list="filterInfo.list"
    />
    <!-- 表格 -->
    <TableContainer
      ref="logInterfaceTable"
      :refresh="tableInfo.refresh"
      :init-curpage="tableInfo.initCurpage"
      v-model:data="tableInfo.data"
      :api="getLogInterface"
      v-model:query="filterInfo.query"
      :field-list="tableInfo.fieldList"
      :handle="tableInfo.handle"
      :check-box="false"
      :tab-index="true"
    >
      <template v-slot:col-error="scope">
        <el-tooltip
          v-if="scope.row.error"
          popper-class="err-msg-tooltip"
          placement="top"
          effect="light"
        >
          <template #content>
            <div class="tooltip-content">
              {{ scope.row.error }}
            </div>
          </template>
          <p class="error-message">{{ scope.row.error }}</p>
        </el-tooltip>
        <span v-else>-</span>
      </template>
    </TableContainer>
    <!-- 详情弹窗 -->
    <PageDialog
      v-if="detailDialogInfo.visible"
      :title="detailDialogInfo.title"
      v-model:visible="detailDialogInfo.visible"
      :width="detailDialogInfo.width"
      :bt-loading="detailDialogInfo.btLoading"
      :bt-list="detailDialogInfo.btList"
    >
      <!-- form -->
      <BasicInformation :info="infoList">
        <template v-slot:basic-content>
          <span class="slip-edit">
            <span v-for="(item, index) in infoList.data.content" :key="index">
              item.content
            </span>
          </span>
        </template>
      </BasicInformation>
    </PageDialog>
  </div>
</template>

<script setup name="logInterfaceInvoke">
import {
  getLogInterface,
  retryLogInterface,
  getLogInterfaceDetail,
} from '@/api/base.js'
import moment from 'moment'
import _ from 'lodash'

const { proxy } = getCurrentInstance()
// 过滤相关配置
const filterInfo = ref({
  query: {
    sort: 'operate_time desc',
    searchType: '',
  },
  list: [
    {
      type: 'input',
      label: '操作名称',
      value: 'operateLike',
      event: search,
    },
    {
      type: 'select-model',
      label: '状态',
      value: 'status',
      code: 'success_status',
      event: search,
    },
    {
      type: 'date',
      value: 'operateTimeLess',
      label: '操作日期',
      event: changeDate,
    },
    { type: 'button', label: '搜索', event: search },
  ],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  fieldList: [
    { label: '操作名称', value: 'operate' },
    { label: 'url', value: 'url' },
    { label: '接口标记', value: 'interfaceFlag' },
    { label: '状态', value: 'statusValue' },
    { label: '操作时间', value: 'operateTime' },
    { label: '操作人员', value: 'operateUserName' },
    { label: '错误信息', value: 'error', type: 'slot' },
    { label: '是否异步', value: 'isAsynValue' },
    { label: '重试状态', value: 'retryStatusValue' },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [
      {
        label: '重试',
        event: retry,
        show: proxy.$permission('logInterfaceInvoke:retry'),
        ifRender: function (row) {
          return (
            row.isAsyn === 1 &&
            row.status === 0 &&
            (row.retryStatus === 0 || row.retryStatus === -2)
          )
        },
      },
      {
        label: '查看',
        event: showDetail,
        show: proxy.$permission('logInterfaceInvoke:list'),
      },
    ],
  },
})
// 详情弹窗
const detailDialogInfo = ref({
  title: '详情',
  visible: false,
  type: '',
  width: '40%',
  btLoading: false,
  btList: [{ label: '关闭', type: '', icon: '', event: close, show: true }],
})
const infoList = ref({
  data: {},
  fieldList: [
    { label: '操作名称', value: 'operate' },
    { label: 'url', value: 'url' },
    { label: '接口标记', value: 'interfaceFlag' },
    { label: '状态', value: 'statusValue' },
    { label: '操作时间', value: 'operateTime' },
    { label: '操作人员', value: 'operateUserName' },
    { label: '是否异步', value: 'isAsynValue' },
    { label: '重试状态', value: 'retryStatusValue' },
    { label: '接口方法', value: 'httpMethod' },
    { label: '最近一次重试时间', value: 'retryTime' },
    { label: '重试次数', value: 'retryCount' },
    { label: '错误信息', value: 'error', type: 'popover' },
    { label: '重试错误信息', value: 'retryError', type: 'popover' },
    { label: '接口参数', value: 'params', type: 'popover' },
  ],
})
// 获取列表
function getList() {
  tableInfo.value.refresh = Math.random()
}
// 搜索
function search() {
  // 重置分页
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
function changeDate(value) {
  if (value) {
    filterInfo.value.query.operateTimeLess = moment(value).format('YYYY-MM-DD') + ' 23:59:59'
    filterInfo.value.query.operateTimeGreater = moment(value).format('YYYY-MM-DD') + ' 00:00:00'
  } else {
    filterInfo.value.query.operateTimeLess = null
    filterInfo.value.query.operateTimeGreater = null
  }
  search()
}
function close() {
  detailDialogInfo.value.visible = false
}
// 详情
function showDetail(data) {
  getLogInterfaceDetail(data.id).then((res) => {
    if (res && res.success) {
      infoList.value.data = res.data
      detailDialogInfo.value.visible = true
    }
  })
}
// 重试
function retry(data) {
  retryLogInterface(data.id).then((res) => {
    if (res && res.success) {
      tableInfo.value.refresh = Math.random()
    }
  })
}
function getOptionLabel(data, option) {
  const result = _.find(option, ['value', data])
  return result ? result.key : '-'
}
onMounted(() => {
  getList()
})
onBeforeUpdate(() => {
  // 数据加载完成后 重新渲染表格
  proxy.$nextTick(() => {
    proxy.$refs['logInterfaceTable'].$refs['table'].doLayout()
  })
})
</script>

<style lang="scss" scoped>
.error-message {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.tooltip-content {
  max-width: 500px;
}
</style>
